<template>
  <div class="app-container customer-div">
    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
        <el-form-item label="关键字：">
          <el-input v-model="listQuery.keywords"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="getList()"
            type="primary">
            查询
          </el-button>
          <el-button
            :loading="btnLoading2"
            @click="syncdata"
            type="primary">
            同步金蝶
          </el-button>

        </el-form-item>
      </el-form>
    </div>

    <!--数据列表-->
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
          align="center"
          label="分类名称">
          <template slot-scope="scope">
            {{scope.row.goodsClass}}
          </template>
        </el-table-column>
        <el-table-column
          prop="departmentNames"
          label="厂家"
          align="center">
          <template slot-scope="scope">
            {{scope.row.factoryName}}
          </template>
        </el-table-column>
        <el-table-column
          label="采购负责人"
          align="center">
          <template slot-scope="scope">
            {{scope.row.userList | fifname('userRealName')}}
          </template>
        </el-table-column>
        <el-table-column
          label="产品线负责人"
          align="center">
          <template slot-scope="scope">
            {{scope.row.chargeUser.chargeUserRealName}}
          </template>
        </el-table-column>
        <el-table-column
          label="协助人"
          align="center">
          <template slot-scope="scope">
            {{scope.row.helperList | fifname('helperRealName')}}
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="showTracking('edit',scope.row)">设置产品线权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>

    <!--修改权限-->
    <el-dialog
      :close-on-click-modal="false"
      title="修改产品线权限"
      :beforeClose="handleClose"
      :visible.sync="dialogVisible"
      width="600px">
      <el-form :model="form" size="mini" label-width="120px" :rules="rules" ref="form">
        <el-form-item label="采购负责人：" prop="userIds">
          <el-select v-model="form.userIds" filterable placeholder="请选择" multiple >
            <el-option
              v-for="item in userOptionList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品线负责人：" prop="chargeId">
          <el-select v-model="form.chargeId" filterable placeholder="请选择">
            <el-option
              v-for="item in userOptionList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="协助人：" >
          <el-select v-model="form.helperIds" filterable placeholder="请选择" multiple>
            <el-option
              v-for="item in userOptionList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

import {getOrderUsersList} from '@/api/partner'
import {factoryListPlan,factorySet,syncFactoryList} from '@/api/order'
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'
const defaultForm = {
  "factoryId" : '',  //商品厂家ID
  "userIds" : [], //采购负责人(支持多个)
  "chargeId" : '', //产品线负责人(单个)
  "helperIds" : [] //协助人(支持多个)
};
const defaultListQuery = {
  keywords:'',
  pageNum:1,
  pageSize:10,
};
export default {
  name: "index",
  data(){
    return{
      listQuery:JSON.parse(JSON.stringify(defaultListQuery)),
      list:[],
      count:0,
      listLoading:false,
      dialogVisible:false,
      form:JSON.parse(JSON.stringify(defaultForm)),
      rules:{
        userIds:[{required: true, message: '此项必填', trigger: 'change'},],
        chargeId:[{required: true, message: '此项必填', trigger: 'change'},],
      },
      btnLoading:false,
      userOptionList:[],
      btnLoading2:false,
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),


  },
  created() {
    this.getList();
    this.getUserOptionList()

  },
  filters: {
    fifname(list,key){
      let array = [];
      list.forEach((el)=>{
        array.push(el[key])
      })
      return array.join(",")
    },
  },
  methods:{
    syncdata(){
      this.btnLoading2 = true;
      syncFactoryList().then(()=>{
        this.btnLoading2 = false;
        this.$message({
          type: 'success',
          message: '同步成功!'
        });
      }).catch(()=>{
        this.btnLoading2 = false;
      })
    },
    //获取员工下拉选项
    getUserOptionList(){
      getOrderUsersList({departmentId:3}).then((res)=>{
        this.userOptionList = res;
      })
    },
    //获取列表
    getList(){
      this.listLoading = true;
      let data = JSON.parse(JSON.stringify(this.listQuery));
      factoryListPlan(data).then((res)=>{
        this.list = res.list;
        this.count = res.count
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      })
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

    //显示新增/编辑
    showTracking(type,item){
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(defaultForm))
      this.form.factoryId = item.factoryId;
      item.userList.forEach((el)=>{
        this.form.userIds.push(el.userId)
      })
      this.form.chargeId = item.chargeUser.chargeUserId
      item.helperList.forEach((el)=>{
        this.form.helperIds.push(el.helperId)
      })
    },

    //关闭弹窗
    handleClose(){
      this.$refs.form.clearValidate();
      this.dialogVisible = false;
      this.btnLoading = false;
    },

    //提交编辑新增
    handleConfirm(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let data = JSON.parse(JSON.stringify(this.form));
          factorySet(data).then((res)=>{
            this.btnLoading = false;
            this.handleClose();
            this.getList();
          }).catch(()=>{
            this.btnLoading = false;
          })
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.avatar-uploader{
  margin-bottom:10px;
  display: inline-block;
  width:80px;
  height:80px;
  border:1px solid #DCDFE6;
  text-align: center;
  line-height: 80px;
}
</style>
